<template>
  <view class="">
    <cu-layout navbar="custom" tabbar="/pages/user/index">
      <view class="user-head">
        <image class="user-bg" src="@/static/img/my-bg.png" mode="" />
      </view>
      <view class="p-13">
        <view class="ucard">
          <view class="ucard-head">
            <view class="ucard-head-title">订单中心</view>
            <view class="ucard-head-more" @click="$.router.go('/pages/order/index')">
              <view class="">查看全部</view>
              <view class="iconfont icon-xiangyou1" />
            </view>
          </view>
          <view class="flex">
            <view class="ucard-item flex-vca" @click="$.router.go('/pages/order/index', {status: 'NA'})">
              <view class="iconfont icon-pay" />
              <view class="ucard-label">待付款</view>
            </view>
            <view class="ucard-item flex-vca" @click="$.router.go('/pages/order/index', {status: 'YA'})">
              <view class="iconfont icon-send" />
              <view class="ucard-label">待发货</view>
            </view>
            <view class="ucard-item flex-vca" @click="$.router.go('/pages/order/index', {status: 'YD'})">
              <view class="iconfont icon-deliver" />
              <view class="ucard-label">待收货</view>
            </view>
            <view class="ucard-item flex-vca" @click="$.router.go('/pages/order/index', {status: 'YS'})">
              <view class="iconfont icon-refund" />
              <view class="ucard-label">已完成</view>
            </view>
          </view>
        </view>
        <view class="ucard ucard-column">
          <view class="ucard-head">
            <view class="ucard-head-title">我的服务</view>
          </view>
          <view class="ucard-list">
            <!-- <view class="ucard-cell">
              <view class="ucard-cell-left">
                <view class="iconfont icon-biaoxing" />
              </view>
              <view class="ucard-cell-title">我的收藏</view>
              <view class="ucard-cell-right">
                <view class="iconfont icon-xiangyou1" />
              </view>
            </view>
            <view class="ucard-cell">
              <view class="ucard-cell-left">
                <view class="iconfont icon-zuji" />
              </view>
              <view class="ucard-cell-title">浏览足迹</view>
              <view class="ucard-cell-right">
                <view class="iconfont icon-xiangyou1" />
              </view>
            </view> -->
            <view class="ucard-cell" @click="$.router.go('/pages/user/address')">
              <view class="ucard-cell-left">
                <view class="iconfont icon-zuobiao" />
              </view>
              <view class="ucard-cell-title">收货地址</view>
              <view class="ucard-cell-right">
                <view class="iconfont icon-xiangyou1" />
              </view>
            </view>
            <view class="ucard-cell">
              <view class="ucard-cell-left">
                <view class="iconfont icon-pengyou" />
              </view>
              <view class="ucard-cell-title">关于我们</view>
              <view class="ucard-cell-right">
                <view class="iconfont icon-xiangyou1" />
              </view>
            </view>
            <view class="ucard-cell">
              <view class="ucard-cell-left">
                <view class="iconfont icon-kefu" />
              </view>
              <view class="ucard-cell-title">联系客服</view>
              <view class="ucard-cell-right">
                <view class="iconfont icon-xiangyou1" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </cu-layout>
  </view>
</template>

<script setup>
import { computed, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import $ from '@/sheep'
onLoad(() => {
  uni.hideTabBar()
})
</script>
<style lang="scss">
.user-head {
	height: 400rpx;
	position: relative;
}
.user-bg {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
.ucard {
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4px 13px 0 rgb(0 0 0 / 8%), 0 2px 4px -2px rgb(0 0 0 / 12%), 0 7px 26px 6px rgb(0 0 0 / 5%);
	padding: 40rpx 0;
	margin-bottom: 30rpx;
	&.ucard-column {
		padding-bottom: 0;
		.ucard-head {
			margin-bottom: 20rpx;
		}
	}
	.ucard-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		margin-bottom: 40rpx;
	}
	.ucard-head-title {
		font-size: 30rpx;
		font-weight: bold;
	}
	.ucard-head-more {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: $uv-tips-color;
		.iconfont {
			font-size: 24rpx;
			margin-left: 6rpx;
		}
	}
	.ucard-item {
		flex: 1;
		.iconfont {
			font-size: 60rpx;
		}
	}
	.ucard-label {
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 16rpx;
	}
	.ucard-cell {
		position: relative;
		display: flex;
		align-items: center;
		padding: 28rpx;
		line-height: 40rpx;
		&::after {
			--left: 80rpx;
			content: '';
			position: absolute;
			bottom: 0;
			left: var(--left);
			width: calc(100% - var(--left));
			border-bottom: 1rpx solid rgba(0,0,0,0.05);
		}

	}
	.ucard-cell-left {
		padding-right: 16rpx;
		.iconfont {
			font-size: 36rpx;
			color: $uv-primary;
		}
	}
	.ucard-cell-title {
		flex: 1;
	}
	.ucard-cell-right {
		padding-left: 12rpx;
		color: $uv-tips-color;
		font-size: 28rpx;
	}
}
.ucard-title {

}

</style>
